<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/about.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
    <script src="./js/axios.js"></script>
</head>
<body>
    <header class="header">
        <div class="container">
        <nav class="nav">
            <div class="title">
                <a href="./index.html">我的个人博客|技术博客</a>
            </div>
            <ul>
                <li>
                    <a href="./index.html">首页</a>
                </li>
                <li>
                    <a href="./sitemap.html">地图</a>
                </li>
                <li>
                    <a href="./about.html">关于</a>
                </li>
                <li>
                    <a href="./guestBook.html">留言</a>
                </li>
            </ul>
        </nav>
        <div class="search">
            <input type="text" placeholder="请输入关键词查找">
            <button>搜索</button>
        </div>
    </div>
    </header>
    <div class="content">
    <div class="content-left">
        <div class="description">
            <br>
            <div>欢迎灌水交流，别看我长时间不发博，博主可一直都在线~</div>
            <br>
            <br>
            <div style="color: red;">友链只交换技术类个人博客或相关行业。博客长期稳定在线，所以也需要你的站尽量稳定，三天两头打不开的我会直接删除友链不再做通知。</div>
            <br>
            <div style="color: red;">博主Q联系:MzcxNjA0Nzg1</div>
            <br>
        </div>
        <div class="messages" id="messages">
            <div class="message-title">
                留言：目前有{{total}}条留言
            </div>
            <div class="message-content" v-for="(item,i) in commentList" :key="i">
                <img src="https://www.zh30.com/avatar/default.jpg" alt="用户评论头像" class="img-circle">
                <strong>{{item.userName}}</strong>:{{item.options}}<span>发表于 {{item.publishDate}} <a href="#send_comment" @click="reply(item.id,item.userName)">[回复]</a></span>
                <p>
                    {{item.comments}}
                </p>
            </div>
        </div>
        <div class="send_comment" id="send_comment">
            <div class="comment_title">发表评论</div>
            <div class="comment_msg">
                <input type="hidden" value="-1" class="comment_reply">
                <input type="hidden" value="0" class="comment_reply_name">
                <input type="text" placeholder="昵称" class="comment_name">
                <input type="email" placeholder="邮箱" class="comment_email">
            </div>
            <div class="comment_content">
                <textarea placeholder="无意义内容我可能不会回复你"></textarea>
            </div>
            <div class="comment_validator">
                <input type="text" placeholder="验证码" class="comment_code">
                <span v-html="vcode" @click="handleChangeCode"></span>
            </div>
            <button @click="handleSubmit">提交</button>
        </div>
    </div>
    <div class="content-right">
        <div class="right-module">
            <div class="title">
                <a href="/">随机标签云</a>
            </div>
            <div class="main">
                <ul class="tagList">
                    <li class="tag">
                        <a href="/">JavaScript</a>
                    </li>
                    <li class="tag">
                        <a href="/">JavaScript</a>
                    </li>
                    <li class="tag">
                        <a href="/">JavaScript</a>
                    </li>
                    <li class="tag">
                        <a href="/">JavaScript</a>
                    </li>
                    <li class="tag">
                        <a href="/">JavaScript</a>
                    </li>
                    <li class="tag">
                        <a href="/">JavaScript</a>
                    </li>
                    <li class="tag">
                        <a href="/">JavaScript</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="right-module">
            <div class="title">
                <a href="/">最近热门</a>
            </div>
            <div class="main">
                <ul class="hotList">
                    <li class="hot">
                        <a href="/">使用码云git的webhook实现生产环境代</a>
                    </li>
                    <li class="hot">
                        <a href="/">使用码云git的webhook实现生产环境代</a>
                    </li>
                    <li class="hot">
                        <a href="/">使用码云git的webhook实现生产环境代</a>
                    </li>
                    <li class="hot">
                        <a href="/">使用码云git的webhook实现生产环境代</a>
                    </li>
                    <li class="hot">
                        <a href="/">使用码云git的webhook实现生产环境代</a>
                    </li>
                    <li class="hot">
                        <a href="/">使用码云git的webhook实现生产环境代</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="right-module">
            <div class="title">
                <a href="/">最新评论</a>
            </div>
            <div class="main">
                <ul class="comments">
                    <li class="comment">
                        <div>
                            <span>华云云服务器</span>
                            <span>[1个月前]</span>
                        </div>
                        <div>
                            <a href="/">可惜了，来晚了，不然可以聊聊服务器的</a>
                        </div>
                    </li>
                    <li class="comment">
                        <div>
                            <span>华云云服务器</span>
                            <span>[1个月前]</span>
                        </div>
                        <div>
                            <a href="/">可惜了，来晚了，不然可以聊聊服务器的</a>
                        </div>
                    </li>
                    <li class="comment">
                        <div>
                            <span>华云云服务器</span>
                            <span>[1个月前]</span>
                        </div>
                        <div>
                            <a href="/">可惜了，来晚了，不然可以聊聊服务器的</a>
                        </div>
                    </li>
                    <li class="comment">
                        <div>
                            <span>华云云服务器</span>
                            <span>[1个月前]</span>
                        </div>
                        <div>
                            <a href="/">可惜了，来晚了，不然可以聊聊服务器的</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="right-module">
            <div class="title">
                <a href="/">友情链接</a>
            </div>
            <div class="main">
                <ul class="youlianList">
                    <li class="youlian">
                        <a href="/">挨踢茶馆</a>
                    </li>
                    <li class="youlian">
                        <a href="/">挨踢茶馆</a>
                    </li>
                    <li class="youlian">
                        <a href="/">挨踢茶馆</a>
                    </li>
                    <li class="youlian">
                        <a href="/">挨踢茶馆</a>
                    </li>
                    <li class="youlian">
                        <a href="/">挨踢茶馆</a>
                    </li>
                    <li class="youlian">
                        <a href="/">挨踢茶馆</a>
                    </li>
                    <li class="youlian">
                        <a href="/">挨踢茶馆</a>
                    </li>
                    <li class="youlian">
                        <a href="/">挨踢茶馆</a>
                    </li>
                    <li class="youlian">
                        <a href="/">挨踢茶馆</a>
                    </li>
                    <li class="youlian">
                        <a href="/">挨踢茶馆</a>
                    </li>
                    <li class="youlian">
                        <a href="/">挨踢茶馆</a>
                    </li>
                    <li class="youlian">
                        <a href="/">挨踢茶馆</a>
                    </li>
                    <li class="youlian">
                        <a href="/">挨踢茶馆</a>
                    </li>
                    <li class="youlian">
                        <a href="/">挨踢茶馆</a>
                    </li>
                    <li class="youlian">
                        <a href="/">挨踢茶馆</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    </div>
    <footer class="footer">
    <ul>
        <li>
            <a href="/">C/C++</a>
        </li>
        <li>
            <a href="/">CSS/DIV</a>
        </li>
        <li>
            <a href="/">java</a>
        </li>
        <li>
            <a href="/">javascript</a>
        </li>
        <li>
            <a href="/">Linux</a>
        </li>
        <li>
            <a href="/">Mac</a>
        </li>
        <li>
            <a href="/">PC技术</a>
        </li>
        <li>
            <a href="/">PHP</a>
        </li>
        <li>
            <a href="/">Python</a>
        </li>
        <li>
            <a href="/">Raspberry</a>
        </li>
        <li>
            <a href="/">Ubuntu</a>
        </li>
        <li>
            <a href="/">wordpress</a>
        </li>
        <li>
            <a href="/">关于SEO分享经验</a>
        </li>
        <li>
            <a href="/">听听音乐</a>
        </li>
        <li>
            <a href="/">幽默搞笑</a>
        </li>
        <li>
            <a href="/">建站经验</a>
        </li>
        <li>
            <a href="/">新闻资讯</a>
        </li>
        <li>
            <a href="/">模拟飞行</a>
        </li>
        <li>
            <a href="/">片言碎语</a>
        </li>
    </ul>
    <ul>
        <li>
            <a href="/">玩转手机</a>
        </li>
        <li>
            <a href="/">编程基础</a>
        </li>
        <li>
            <a href="/">视频分享</a>
        </li>
    </ul>
    <div>
        Copyright © 2010-2020 我的个人博客 All rights reserved. 由免费开源的WordPress强力驱动. 鲁ICP备14017955号站长统计
    </div>
    </footer>
    <script src="./js/guestBook.js"></script>
</body>
</html>
